<!-- 区域管理 -->
<template>
  <div v-userAuth="'D21-1'">
    <a-table rowKey='zone_id' :columns='areaColumns' :loading="tableLoading" :dataSource='areaData'
      :locale="defaultSetting" :pagination='pagination' size='small' bordered
      :rowClassName="(record, i) => i % 2 === 1 ? 'table-even-row' : 'table-odd-row'">
      <!-- 区域名 -->
      <template slot="area" slot-scope='text, record'>
        <div class="area-name-style" @click="openAreaDetail(record)">{{ text }}</div>
      </template>
      <!-- 所属区域组 -->
      <template slot="area_group" slot-scope='text, record'>
        <div class="area-name-style" @click="openAreaGroupDetail(record)">{{ text }}</div>
      </template>
      <!-- 是否只读 -->
      <template slot="is_ro" slot-scope='text, record'>
        <div v-if="text === 1">
          <span class="green-circle"></span>{{ $t('Yes') }}
        </div>
        <div v-else>
          <span class="red-circle"></span>{{ $t('No') }}
        </div>
      </template>
      <!-- 是否为主 -->
      <template slot="is_main" slot-scope='text, record'>
        <div v-if="text === 1">
          <span class="green-circle"></span>{{ $t('Yes') }}
        </div>
        <div v-else>
          <span class="red-circle"></span>{{ $t('No') }}
        </div>
      </template>
      <!-- 元数据日志 -->
      <template slot="meta_log" slot-scope='text, record'>
        <div v-if="text === 1">
          <span class="green-circle"></span>{{ $t('Enable') }}
        </div>
        <div v-else>
          <span class="red-circle"></span>{{ $t('Not-enabled') }}
        </div>
      </template>
      <!-- 数据日志 -->
      <template slot="data_log" slot-scope='text, record'>
        <div v-if="text === 1">
          <span class="green-circle"></span>{{ $t('Enable') }}
        </div>
        <div v-else>
          <span class="red-circle"></span>{{ $t('Not-enabled') }}
        </div>
      </template>
      <!-- 终端信息 -->
      <template slot="terminal_log" slot-scope='text, record'>
        <a-popover :title="$t('Terminal-detail')" placement="topLeft">
          <!-- :getPopupContainer="triggerNode => { return triggerNode.parentNode; }" -->
          <template slot="content">
            <div class="terminal-info-box">
              <p v-for="(item, index) in record.endpoints" :key="index">{{ item }}</p>
            </div>
          </template>
          <!-- <i class="icon icon-catalogue16f table-operation-icon"></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-catalogue16f"></Iconfont>
        </a-popover>
      </template>
      <template slot="operate" slot-scope='text, record'>
        <a-tooltip placement='bottom' v-userAuth="'D21-2'">
          <template slot='title'>
            <span>{{ $t('Edit') }}</span>
          </template>
          <!-- <i class="icon icon-edit16f table-operation-icon" @click="editArea(record)"></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editArea(record)"></Iconfont>
        </a-tooltip>
      </template>
    </a-table>

    <!-- 编辑区域 -->
    <EditArea :visible="editAreaModal" :targetArea="targetArea" @updateArea="getAreaData" @closeModal="closeModal" />

    <!-- 区域详情信息 -->
    <AreaDetail :visible="areaDetailModal" :targetArea="targetArea" @closeModal="closeModal" />

    <!-- 区域组详情信息 -->
    <AreaGroupDetail :visible="areaGroupDetailModal" :targetArea="targetArea" @updateArea="getAreaData"
      @closeModal="closeModal" />
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import EditArea from '@/views/storage_mgr/object/areaOperate/EditArea'
import AreaDetail from '@/views/storage_mgr/object/areaOperate/AreaDetail'
import AreaGroupDetail from '@/views/storage_mgr/object/areaOperate/AreaGroupDetail'

export default {
  name: "AreaManage",
  components: { EditArea, AreaDetail, AreaGroupDetail },
  data() {
    return {
      tableLoading: false,
      areaColumns: [
        { title: this.$t('Region-name'), dataIndex: 'zone_name', key: 'zone_name', ellipsis: true, scopedSlots: { customRender: 'area' } },
        { title: this.$t('Regional-group'), dataIndex: 'zonegroup_name', key: 'zonegroup_name', ellipsis: true, scopedSlots: { customRender: 'area_group' } },
        { title: this.$t('Field'), dataIndex: 'realm_name', key: 'realm_name', ellipsis: true },
        { title: this.$t('Is-read-only'), dataIndex: 'readonly', key: 'readonly', ellipsis: true, scopedSlots: { customRender: 'is_ro' } },
        { title: this.$t('Is-primary'), dataIndex: 'is_master', key: 'is_master', ellipsis: true, scopedSlots: { customRender: 'is_main' } },
        { title: this.$t('Meta-log'), dataIndex: 'log_meta', key: 'log_meta', ellipsis: true, scopedSlots: { customRender: 'meta_log' } },
        { title: this.$t('Data-log'), dataIndex: 'log_data', key: 'log_data', ellipsis: true, scopedSlots: { customRender: 'data_log' } },
        { title: this.$t('Terminal-info'), dataIndex: 'endpoints', key: 'endpoints', ellipsis: true, scopedSlots: { customRender: 'terminal_log' } },
        { title: this.$t('Operate'), key: 'operate', ellipsis: true, scopedSlots: { customRender: 'operate' }, width: 90 },
      ],
      areaData: [],
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20', '25'],
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSizev,
        buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
      },
      defaultSetting: { emptyText: <EmptyData /> },
      editAreaModal: false,
      targetArea: {},
      modalType: new Map([
        ['edit-area', () => { this.editAreaModal = false; }],
        ['area-detail', () => { this.areaDetailModal = false; }],
        ['area-group-detail', () => { this.areaGroupDetailModal = false; }],
      ]),
      areaDetailModal: false,
      areaGroupDetailModal: false,
    }
  },

  mounted() {
    this.getAreaData()
  },

  watch: {
    "$store.state.language"() {
      this.areaColumns = [
        { title: this.$t('Region-name'), dataIndex: 'zone_name', key: 'zone_name', ellipsis: true, scopedSlots: { customRender: 'area' } },
        { title: this.$t('Regional-group'), dataIndex: 'zonegroup_name', key: 'zonegroup_name', ellipsis: true, scopedSlots: { customRender: 'area_group' } },
        { title: this.$t('Field'), dataIndex: 'realm_name', key: 'realm_name', ellipsis: true },
        { title: this.$t('Is-read-only'), dataIndex: 'readonly', key: 'readonly', ellipsis: true, scopedSlots: { customRender: 'is_ro' } },
        { title: this.$t('Is-primary'), dataIndex: 'is_master', key: 'is_master', ellipsis: true, scopedSlots: { customRender: 'is_main' } },
        { title: this.$t('Meta-log'), dataIndex: 'log_meta', key: 'log_meta', ellipsis: true, scopedSlots: { customRender: 'meta_log' } },
        { title: this.$t('Data-log'), dataIndex: 'log_data', key: 'log_data', ellipsis: true, scopedSlots: { customRender: 'data_log' } },
        { title: this.$t('Terminal-info'), dataIndex: 'endpoints', key: 'endpoints', ellipsis: true, scopedSlots: { customRender: 'terminal_log' } },
        { title: this.$t('Operate'), key: 'operate', ellipsis: true, scopedSlots: { customRender: 'operate' }, width: 90 },
      ]
    },
  },

  methods: {
    // 获取表格数据
    async getAreaData() {
      this.tableLoading = true;
      const res = await this.$api.areaManage.getAllAreaRequest();
      console.log('区域管理表格数据', res)
      this.areaData = res.data;
      this.tableLoading = false;
    },

    //编辑区域
    editArea(record) {
      this.targetArea = record;
      this.editAreaModal = true;
    },

    //关闭操作弹窗
    closeModal(type) {
      let action = this.modalType.get(type);
      action.call(this);
    },

    //打开区域详情信息
    openAreaDetail(record) {
      this.targetArea = record;
      this.areaDetailModal = true;
    },

    //打开区域组详细信息
    openAreaGroupDetail(record) {
      this.targetArea = record;
      this.areaGroupDetailModal = true;
    },
  },
}
</script>
<style scoped>
.terminal-info-box {
  /* width: 240px; */
  height: 140px;
  background-color: #edf0f2;
  overflow: auto;
  padding: 10px;
}

.area-name-style {
  color: var(--themeColor);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

::v-deep.ant-popover-title {
  border-bottom: none;
  padding-top: 12px;
}

::v-deep.ant-popover-inner-content {
  padding-top: 0;
}
</style>